<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
                #myCanvas {
                        background-color: black;
                        display: block;
                        margin: 0 auto;
                }
        </style>
</head>

<body>
        <canvas id="myCanvas" width="1500" height="800"></canvas>
</body>
<script type="text/javascript">
                var canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('2d');
                var zhongX = 750;//画布中点横坐标(鼠标位置x)
                var zhongY = 400;//画布中点纵坐标(鼠标位置y)
                //随机函数
                function randomNum(m, n) {
                        return Math.floor(Math.random() * (n - m + 1) + m);
                }
               
                //创建一个小球类
                function Ball() {
                        //随机一个小球半径
                        this.r = randomNum(1, 2);
                        //随机颜色
                        var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
                        //随机一个小球的颜色
                        this.color = color;
                        //随机一个小球x轴的位置和y轴的位置
                        this.x = randomNum(this.r, canvas.width - this.r);
                        this.y = randomNum(this.r, canvas.height - this.r);
                        //随机小球移动速度和方向
                        this.speedX = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
                        this.speedY = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);
                }
                //小球移动
                Ball.prototype.move = function() {
                        this.x += this.speedX;
                        this.y += this.speedY;
                        //小球碰到左边界的处理 反弹
                        if(this.x <= this.r) {
                                this.x = this.r;
                                //反弹
                                this.speedX *= -1;
                        }
                        //小球碰到右边界的处理 反弹
                        if(this.x >= canvas.width - this.r) {
                                this.x = canvas.width - this.r;
                                //反弹
                                this.speedX *= -1;
                        }
                        //小球碰到上边界的处理 反弹
                        if(this.y <= this.r) {
                                this.y = this.r;
                                //反弹
                                this.speedY *= -1;
                        }
                        //小球碰到下边界的处理 反弹
                        if(this.y >= canvas.height - this.r) {
                                this.y = canvas.height - this.r;
                                //反弹
                                this.speedY *= -1;
                        }
                }
                //画小球
                Ball.prototype.draw = function() {
                        //开始绘制
                        ctx.beginPath();
                        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
                        ctx.fillStyle = this.color;
                        ctx.fill();
                }
                //创建小球对象
                var balls = []; //存储所有的小球对象
                var arr = [];//储存一定范围内的小球
                for(var i = 0; i < 450; i++) {
                        var ball = new Ball();
                        balls.push(ball);
                }
                setInterval(function() {
                        arr = [];
                        ctx.clearRect(0, 0, canvas.width, canvas.height)
                        for(var i = 0; i < balls.length; i++) {
                                //小球移动
                                balls[i].move();
                                //绘制小球
                                balls[i].draw();
                                if (ballLianXianMa(balls[i])) {
                                        arr.push(balls[i]);
                                }
                        }
                        //绘制范围内并且符合条件小球之间的两两连线(画直线)
                        for(var i = 0; i < arr.length; i++) {
                                for(var j = 0; j < arr.length; j++) {
                                        if(ballAndBallDis(arr[i], arr[j]) < 80 &&
                                        ballAndBallDis(arr[i], arr[j]) > 40) {
                                                ctx.beginPath();
                                                ctx.moveTo(arr[i].x, arr[i].y);
                                                ctx.lineTo(arr[j].x, arr[j].y);
                                                ctx.strokeStyle = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
                                                ctx.stroke();
                                        }
                                }
                        }
                }, 80);
                //判断临界值,不允许连线范围超出画布
                canvas.onmousemove = function () {
                        if (event.offsetX <= 200) {
                                zhongX = 200;
                        }
                        else if (event.offsetX >= 1300) {
                                zhongX = 1300;
                        }
                        else{
                                zhongX = event.offsetX;
                        }
                        if (event.offsetY <= 200) {
                                zhongY = 200;
                        }
                        else if (event.offsetY >= 600) {
                                zhongY = 600;
                        }
                        else{
                                zhongY = event.offsetY;
                        }
                }
                //判断小球是否在需要连线的范围内的函数
                function ballLianXianMa (obj) {
                        var disx = Math.abs(zhongX - obj.x);
                        var disy = Math.abs(zhongY - obj.y);
                        if(Math.sqrt(disx * disx + disy * disy) <= 200 - obj.r) {
                                return true;
                        }
                        return false;
                }
                //计算两个小球之间的距离函数
                function ballAndBallDis(obj1, obj2) {
                        var disx = Math.abs(obj1.x - obj2.x);//水平距离
                        var disy = Math.abs(obj1.y - obj2.y);//垂直距离
                        return Math.sqrt(disx * disx + disy * disy);
                }
        </script>

</html>